<script setup>
	// 指令修饰符：借助指令修饰符，是指令更强大
	// 分类：
	// 	1.按键指令修饰符：用来监测用户的按键，配合keydown和keyup使用
  let keyboard = () => {
    console.log("666")
  }
	// 	2.事件修饰符：简化程序用于阻止冒泡、组织默认行为的操作(可以连续.修饰符)
  //  .prevent-阻止默认行为-比如默认网址点击跳转
  //  .阻止冒泡事件（父子同名事件，点击子事件，子事件触发后，父事件也被触发）
  let onPClick = () => {
    console.log("555")
  }
  let onDivClick = ()=> {
    console.log("999")
  }
	// 	3.双向绑定指令修饰符：让v-model功能更强大
</script>

<template>
	<div @click="onDivClick">
    <!-- 只监听.enter(按键修饰符)，出现该按键，才触发事件 -->
    <input type="text" @keydown.enter="keyboard">
    <!-- .prevent阻止默认跳转 -->
    <a href="https://baidu.com" @click.prevent>百度⼀下</a>
    <!-- .stop阻止冒泡事件 -->
    <p @click.stop="onPClick"></p>
	</div>

</template>

<style scoped>
  div {
    width: 400px;
    height: 200px;
    background: plum;
  }
  div a {
    display: block;
    width: 100px;
    text-decoration: none;
    background: tomato;
    text-align: center;
    color: #fff;
  }
  div p {
    width: 200px;
    height: 100px;
    background: rebeccapurple;
  }
</style>